<template>
  <DnsList :dnslist='dnslist' :pagination='pagination' :loading='loading' @onClickDelete='onClickDelete' @onDataLists='onDataLists' />
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import { $message } from "@/components/AntDesign/message";
import { getdns } from "@/api/dnsApi";
import createStore from "@/store/index";
import DnsList from "@/components/DnsConfig/DnsList.vue";
export default {
  components: {
    DnsList,
  },
  setup() {
    const data = reactive({
      dnslist: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
    });

    /* 查询域名 */
    async function getDns(pageNo = 1) {
      try {
        data.loading = true;
        const result = await getdns({
          pageNo,
          pageSize: data.pagination.pageSize,
          id: createStore.state.userDataList._id,
        });
        if (result.data.data) {
          result.data.data.forEach((element: any) => {
            element.key = element._id;
          });
          data.dnslist = result.data.data;
          data.pagination.total = result.data.total;
        }
        data.loading = false;
      } catch (error) {
        data.loading = false;
        $message("error", error.data.message);
      }
    }
    getDns();

    /* 分页事件 */
    function onDataLists(current: number) {
      data.pagination.current = current;
      getDns(current);
    }

    /* 删除 */
    function onClickDelete(index: number) {
      // data.dnslist.splice(index, 1);
      getDns(data.pagination.current);
    }

    return {
      ...toRefs(data),
      onClickDelete,
      onDataLists,
    };
  },
};
</script>